<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>

    <!--引入本地 element-ui 的样式，-->
    <link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
    <script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
    <script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>
    <script type="text/javascript" src="/admin/plugin/element-ui/httpVueLoader.js"></script>


    <!--    引入Layui组件-->
    <link rel="stylesheet" href="/admin/plugin/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
    <script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>

    <script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1.1"></script>
    <script type="text/javascript" src="/admin/html/module/yumenyoutian/js/api.js"></script>



    <style >
        .table-box{
            display: flex;
            justify-content: space-between;
        }

        ul li {
            padding: 0 !important;
            margin: 0 !important;
            list-style: none;
        }
        .list-box {
            margin-left: 10px;
        .title {
            padding-left: 10px;
            font-size: 14px;
            height: 40px;
            display: flex;
            align-items: center;
            color: #909399;
            font-weight: 700;
            background: #fafafa;
            border: 1px solid #ebeef5;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        .select-box {
            margin-left: 10px;
        }
        }
        .list {
            width: 500px;
            height: 440px;
            font-size: 14px;
            overflow: hidden;
            border: 1px solid #ebeef5;
        .item {
            padding: 5px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #ddd;
        .left {
            width: 345px;
            line-height: 20px;
        .danger {
            color: #f56c6c;
        }
        .success {
            color: green;
        }
        }
        .right {
            width: 130px;
            display: flex;
            justify-content: space-around;
        .edit-btn {
            background: #409eff;
            color: #fff;
            padding: 7px 8px;
            border-radius: 50%;
            cursor: pointer;
        }
        }
        }
        }
        }
    </style>
</head>
<body style="padding: 10px 3px;">

    <div id="app">
        <div class="app-container">
            <!-- 数据查询表单 -->
            <el-form :inline="true" :model="queryform" size="mini">
                <el-form-item label="关键词:">
                    <!-- trim 去除前后空格 -->
                    <el-input
                            v-model.trim="queryform.title"
                            clearable
                            placeholder="请输入关键词"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button
                            icon="el-icon-search"
                            type="primary"
                            @click="queryData"
                            style="margin-left: 10px"
                    >查询</el-button
                    >
                    <el-button icon="el-icon-refresh" @click="reload">重置</el-button>
                </el-form-item>
                <HelpBtn :helpId="4001" />
            </el-form>

            <!-- 数据表格部分 -->
            <div class="table-box">
                <el-table
                        :data="list"
                        border
                        stripe
                        max-height="480"
                        style="width: 100%; margin-bottom: 10px"
                >
                    <el-table-column
                            prop="lcmc"
                            label="流程名称"
                            align="center"
                    ></el-table-column>
                    <el-table-column
                            prop="title"
                            label="标题"
                            align="center"
                    ></el-table-column>
                    <el-table-column
                            prop="jxz"
                            label="流程状态"
                            align="center"
                    ></el-table-column>
                    <el-table-column
                            prop="sqsj"
                            label="申请时间"
                            align="center"
                    ></el-table-column>
                    <el-table-column
                            prop="fqruserid"
                            label="申请人"
                            align="center"
                    ></el-table-column>
                    <el-table-column align="center" fixed="right" label="操作" width="220px" >
                        <template slot-scope="scope">
                            <el-button
                                    type="primary"
                                    @click="shenhedata(scope.row)"
                                    size="mini"
                            >查看</el-button
                            >
                            <el-button
                                    type="success"
                                    @click="liuchengquanmao(scope.row)"
                                    size="mini"
                            >流程全貌</el-button
                            >
                        </template>
                    </el-table-column>
                </el-table>


                <div class="list-box">
                    <div class="title">
                        消息中心
                        <el-radio-group
                                class="select-box"
                                v-model="radio"
                                size="small"
                                @change="handleChange"
                        >
                            <el-radio-button label="0">待审核</el-radio-button>
                            <el-radio-button label="1">已审核</el-radio-button>
                            <el-radio-button label="2">全 部</el-radio-button>
                        </el-radio-group>
                    </div>
                    <!--  -->
                    <div class="list" >
                        <vueSeamlessScroll
                                :class-option="optionHover"
                                :data="listData"
                                v-loading="loading"
                        >
                            <div class="item" v-for="(item, index) in listData" :key="index">
                                <div class="left">
                                    <div :class="{ danger: item.zt == 2, success: item.zt == 1 }">
                                        {{ item.title }}
                                    </div>
                                </div>
                                <div class="right">
                                    <div
                                            class="edit-btn"
                                            :data-obj="JSON.stringify(item)"
                                            :id="1"
                                    >
                                        <i
                                                class="el-icon-edit"
                                                :data-obj="JSON.stringify(item)"
                                                @click="shenhedata_update(item)"
                                                :id="1"
                                        ></i>
                                    </div>
                                    <el-button
                                            size="mini"
                                            type="success"
                                            @click="liuchengquanmao(item)"
                                            :data-obj="JSON.stringify(item)"
                                            :id="2"
                                    >
                                      <span :data-obj="JSON.stringify(item)" :id="2"
                                      >流程全貌</span
                                      >
                                    </el-button>
                                </div>
                            </div>
                        </vueSeamlessScroll>
                    </div>
                </div>
            </div>

            <!-- 分页组件 -->
            <el-pagination
                    v-if="page.pageCount != 1"
                    background
                    layout="prev, pager, next"
                    @current-change="changePage"
                    :page-count="page.pageCount"
            >
            </el-pagination>


        </div>
    </div>

    <script>


        var vm = new Vue({
           el:"#app",
           data:{
               queryform: {
                   title: "",
               },
               list: [], //列表数据
               page: {
                   //分页对象
                   pageNumber: 1, //当前页码
                   pageSize: 20, //每页显示多少条
                   pageCount: 1,
               },

               //消息中心数据
               listData: [],
               radio: "0",
               loading: false,
           },
            // 监听属性 类似于data概念
            computed: {
                optionHover() {
                    return {
                        step: 0.5, // 数值越大速度滚动越快
                        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
                        hoverStop: true, // 是否开启鼠标悬停stop
                        direction: 1, // 0向下 1向上 2向左 3向右
                        openWatch: true, // 开启数据实时监控刷新dom
                        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
                    };
                },
            },
           created(){
               this.init();
           },
            methods:{
               async init(){
                   // 获取列表数据
                   this.fetchData();
                   // 获取查询表单下拉框数据
                   this.getOptionsData();
                   this.getData();
               },
                async shenhedata_update(row){
                    if(row.zt != "0"){
                        this.shenhedata(row);
                        return;
                    }
                    let btn = {
                        btn: ['通过','驳回', '取消']
                        , yes: async function (index, layero) {
                            vm.multipleSelection = [row.id];
                            vm.shenhe();
                            //按钮【按钮一】的回调
                            // let win = getTopIframe(layero);
                            // let data = win.vm.tipMessage;
                            // vm.datashenhe("2",data);
                        }
                        , btn2: function (index, layero) {
                            vm.multipleSelection = [row.id];
                            vm.shenhenot();
                            //按钮【按钮二】的回调
                            return false; //开启该代码可禁止点击该按钮关闭
                        }, btn3: function (index, layero) {
                            //按钮【按钮二】的回调
                            //return false 开启该代码可禁止点击该按钮关闭
                        }
                    };
                    let res = await  postWebCustom(getTableId("1998"),{bdbd:row.bdbd,dataid:row.dataid});
                    if(res.code == 0){
                        top.alert(res.msg);
                        return;
                    }
                    top.data.other = {};
                    top.data.other.dataid = row.dataid;
                    let url = res.data.url;
                    top.f_layer_open_get(url, "90%", "85%", function () {
                    }, btn, "流程审核",res.data.data);
                },
                async datashenhe(lx,ly){
                    // 准备参数
                    const params = {
                        id: ""+vm.multipleSelection,
                        lx: lx,
                        ly: ly,
                    };
                    let i = top.load();
                    // 请求API
                    const res = await api.queryBody(
                        "/admin/api/pmc/ProcessManagementController/approvedAndNotthrough",
                        params
                    );
                    top.layer.close(i);
                    if(res.code == 1){
                        top.layer.closeAll();
                    }
                    vm.init();
                    top.alert(res.msg);
                },
                //审核驳回
                shenhenot(){
                    if(this.multipleSelection.length == 0){
                        top.alert("请选择数据进行审核！");
                        return ;
                    }
                    let btn = {
                        btn: ['确定', '取消']
                        , yes: async function (index, layero) {
                            //按钮【按钮一】的回调
                            let win = getTopIframe(layero);
                            let data = win.vm.tipMessage;
                            vm.datashenhe("2",data);
                        }
                        , btn2: function (index, layero) {
                            //按钮【按钮二】的回调
                            //return false 开启该代码可禁止点击该按钮关闭
                        }
                    };

                    top.f_layer_open_get("/admin/html/module/yumenyoutian/liuchengshenpi/shenhe_input.html", "40%", "60%", function () {

                    }, btn, "流程审核")
                },
                //审核通过
                shenhe(){
                    if(this.multipleSelection.length == 0){
                        top.alert("请选择数据进行审核！");
                        return ;
                    }
                    let btn = {
                        btn: ['确定', '取消']
                        , yes: async function (index, layero) {
                            //按钮【按钮一】的回调
                            let win = getTopIframe(layero);
                            let data = win.vm.tipMessage;
                            vm.datashenhe("1",data);
                        }
                        , btn2: function (index, layero) {
                            //按钮【按钮二】的回调
                            //return false 开启该代码可禁止点击该按钮关闭
                        }
                    };

                    top.f_layer_open_get("/admin/html/module/yumenyoutian/liuchengshenpi/shenhe_input.html", "40%", "60%", function () {

                    }, btn, "流程审核")
                },
                // 获取流程管理审批类别下拉框数据
                async getProcessOptions() {
                    const res = await api.postBody(
                        "/admin/api/pmc/ProcessManagementController/eventListOptions"
                    );
                    return res;
                },
                // 获取流程审批人下拉框数据
                async getProcessUser(){
                    const res = await api.postBody('/admin/api/pmc/ProcessManagementController/approverDropdownBox')
                    return res;
                },
                // 获取绑定表单下拉框
                async getbdList(){
                    const res = await api.postBody('/admin/api/pmc/ProcessManagementController/listFormEntry')
                    return res;

                },
                //流程全貌
                async liuchengquanmao(row){
                    //初始化流程设计数据
                    top.data.getProcessOptions = await this.getProcessOptions();
                    top.data.getProcessUser = await this.getProcessUser();
                    top.data.getbdList = await this.getbdList();

                    const params = {
                        lcid:row.lcid,
                        dataid:row.dataid
                    }
                    const res = await api.queryBody(
                        '/admin/api/pmc/ProcessManagementController/processMonitoringPreview',
                        params
                    )
                    let datanode = JSON.stringify(res.data);
                    top.data.getOldProcess = {
                        "code": 1,
                        "msg": "",
                        "data": datanode,
                        "totalCount": 0,
                        "curPage": 0,
                        "pageSize": 0,
                        "success": true
                    };
                    top.data.other = {isedit:false};

                    let btn = {
                        btn: ['取消']
                        , btn2: function (index, layero) {
                            //按钮【按钮二】的回调
                            //return false 开启该代码可禁止点击该按钮关闭
                        }
                    };
                    top.f_layer_open_get("/admin/html/module/yumenyoutian/system/flow/index.html", "80%", "75%", function () {
                    }, btn, "流程全貌");
                },
                async shenhedata(row){
                    let btn = {
                        btn: ['取消']
                        , btn3: function (index, layero) {
                            //按钮【按钮二】的回调
                            //return false 开启该代码可禁止点击该按钮关闭
                        }
                    };
                    let res = await  postWebCustom(getTableId("1998"),{bdbd:row.bdbd,dataid:row.dataid});
                    if(res.code == 0){
                        top.alert(res.msg);
                        return;
                    }
                    top.data.other = {};
                    top.data.other.dataid = row.dataid;
                    top.f_layer_open_get("/admin/html/inputCustom/index.html?tableId="+res.data.tableId, "90%", "85%", function () {
                    }, btn, "查看数据",res.data.data);
                },
                async getData() {
                    const params = {
                        zt: this.radio,
                    };
                    const res = await api.queryBody(
                        "/admin/api/pmc/ProcessManagementController/homeMessageCenter",
                        params
                    );
                    this.listData = res.data;
                    console.log(res.data);
                },
                // 监听消息中心单选按钮改变
                handleChange(val) {
                    this.loading = true;
                    this.getData();
                    setTimeout(() => {
                        this.loading = false;
                    }, 500);
                },
                // 获取流程列表
                async fetchData(query) {
                    // 准备参数
                    const params = {
                        pageNumber: this.page.pageNumber,
                        pageSize: this.page.pageSize,
                        ...query,
                    };
                    // 请求API
                    const res = await api.postBody(
                        "/admin/api/pmc/ProcessManagementController/processMonitoringListQuery",
                        params
                    );
                    if (res.code == 1) {
                        console.log(res.data);
                        this.list = res.data.rows;
                        this.page.pageCount = parseInt(res.data.pageCount);
                    } else {
                        this.$message.error(res.msg);
                    }
                },
                // 页码改变重新请求数据
                changePage(page) {
                    this.page.pageNumber = page;
                    this.fetchData();
                },
                // 获取查询表单下拉框数据
                async getOptionsData() {
                    const res = await api.postBody(
                        "/admin/api/pmc/ProcessManagementController/selectOptions"
                    );
                    if (res.code == 1) {
                        this.reasonOptions = res.data;
                        // console.log(res);
                    } else {
                        this.$message.error(res.msg);
                    }
                },
                // 数据查询表单
                queryData() {
                    // 将页码变为1
                    this.page.pageNumber = 1;
                    // 重新抓取数据
                    this.fetchData(this.queryform);
                    this.$message.success("查询成功");
                },
                // 重置查询输入框
                reload() {
                    this.queryform = {};
                    // 重新抓取数据
                    this.fetchData();
                    this.$message.success("重置成功");
                },
            }
        });
    </script>
</body>
</html>